<style lang="scss" scoped>
.content {
    margin-top: 10px;
    border-top: 1px solid #ccc;
    // border-bottom: 1px solid #ccc;
    // height: 260px;
}
</style>

<template>
    <div style="padding: 10px;" v-for="(v, i) in detailList" :key="i">
        <header style="position: sticky;top: -1px;height: 35px;background-color: #fff;z-index:10">
            <van-nav-bar left-arrow :title="v.texttitle" @click-left="$router.go(-1)" />
        </header>
        <h2 style="font-weight: normal;line-height: 35px;margin: 10px 0;"> {{ v.texttitle }} </h2>
        <p style="font-size: 14px; color: #666;">2023-12-08 <span style="color: orangered;"><van-icon name="volume-o" />
                {{ v.textcount }} 次</span></p>
        <div class="content">
            <img :src="v.textimage"
                style="width: 100px;height: 100px;margin-left: 120px;margin-top: 20px; border-radius: 50%;" alt="">

            <p style="text-align: center;font-size: 18px; line-height: 30px;"> {{ v.doctorname }} <span
                    style="font-size: 14px;">主治医师</span></p>
            <p style="text-align: center;line-height: 35px;">济宁医学院附属医院 | {{ v.doctoradministre }}</p>
            <p style="text-align: center;">
                <!-- <audio controls
                    :src="v.textaudio"></audio> -->
                <!-- 文字转录音 -->
                <Langage :textWord="v.textdescword"></Langage>
            </p>
            <p style="margin-left: 5px;font-size: 16px;">语音内容</p>
            <p style="font-size: 14px;padding: 5px;line-height: 30px;">
                {{ v.textdescword }}
            </p>
        </div>
        <div class="menu" style="width: 100%;height: 80px;background-color: #fff;">
            <h3 style="padding: 2px 5px;border-left: 5px solid blue;
        border-bottom: 1px solid #f2f2f2;line-height: 35px;">相关主题</h3>
            <p
                style="width: 150px;height: 40px;line-height: 40px;border-radius: 30px;border: 1px solid #ccc;padding: 0 10px;overflow: hidden;">
                {{ v.texttitle }} </p>
        </div>
        <ContactForm></ContactForm>
        <p style="text-align: center;font-size: 16px;color: blue;" @click="$router.push('/audioList')"> 更多医生语音 > </p>
    </div>
</template>

<script setup lang="ts">
import Langage from '@/components/langage/indexView.vue'
import ContactForm from '@/components/ContactForm/indexView.vue'
import axios from 'axios'
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const id = route.params.id
const detailList = ref()

const getDetail = async () => {
    const res = await axios.get('/api/book/detail', { params: { id: id } })
    detailList.value = res.data.data
    console.log(detailList)
}
getDetail()



</script>
